<script setup lang="ts">
import { getPatientMyUserApi } from '@/apis/user'
import { useUserStore } from '@/stores/user'
import type { GetPatientMyUserData } from '@/types/user'
import { ref } from 'vue'

const userInfo = ref<GetPatientMyUserData>({} as GetPatientMyUserData)
const getPatientMyUser = async () => {
  const res = await getPatientMyUserApi()
  // console.log('res', res)
  userInfo.value = res.data
}
getPatientMyUser()

const handleLogout = async () => {
  const res = await uni.showModal({
    title: '提示',
    content: '确定退出登录吗？',
    confirmColor: '#16c2a3',
  })
  // 用户点击了确定按钮
  if (res.confirm) {
    //清除token
    const store = useUserStore()
    store.clearToken()
    store.clearUserInfo()
    // 关闭所有页面，打开登录页
    uni.reLaunch({ url: '/pages/login/login' })
  }
}
</script>

<template>
  <auth-page>
    <scroll-view scroll-y>
      <view class="my-page">
        <!-- 用户资料（头像&昵称） -->
        <view class="user-profile">
          <image class="user-avatar" :src="userInfo.avatar"></image>
          <view class="user-info">
            <text class="nickname">{{ userInfo.account || userInfo.mobile }}</text>
            <text class="iconfont icon-edit"></text>
          </view>
        </view>
        <!-- 用户数据 -->
        <view class="user-data">
          <navigator hover-class="none" url=" ">
            <text class="data-number">{{ userInfo.collectionNumber }}</text>
            <text class="data-label">收藏</text>
          </navigator>
          <navigator hover-class="none" url=" ">
            <text class="data-number">{{ userInfo.likeNumber }}</text>
            <text class="data-label">关注</text>
          </navigator>
          <navigator hover-class="none" url=" ">
            <text class="data-number">{{ userInfo.score }}</text>
            <text class="data-label">积分</text>
          </navigator>
          <navigator hover-class="none" url=" ">
            <text class="data-number">{{ userInfo.couponNumber }}</text>
            <text class="data-label">优惠券</text>
          </navigator>
        </view>
        <!-- 问诊医生 -->
        <custom-section
          v-if="userInfo.consultationInfo?.length > 0"
          :custom-style="{ paddingBottom: '20rpx' }"
          title="问诊中"
        >
          <swiper
            class="uni-swiper"
            indicator-active-color="#2CB5A5"
            indicator-color="#EAF8F6"
            indicator-dots
          >
            <swiper-item>
              <view class="doctor-brief">
                <image class="doctor-avatar" src="/static/uploads/doctor-avatar.jpg" />
                <view class="doctor-info">
                  <view class="meta">
                    <text class="name">王医生</text>
                    <text class="title">内分泌科 | 主任医师</text>
                  </view>
                  <view class="meta">
                    <text class="tag">三甲</text>
                    <text class="hospital">积水潭医院</text>
                  </view>
                </view>
                <navigator class="doctor-contcat" hover-class="none" url=" "> 进入咨询 </navigator>
              </view>
            </swiper-item>
            <swiper-item>
              <view class="doctor-brief">
                <image class="doctor-avatar" src="/static/uploads/doctor-avatar.jpg" />
                <view class="doctor-info">
                  <view class="meta">
                    <text class="name">王医生</text>
                    <text class="title">内分泌科 | 主任医师</text>
                  </view>
                  <view class="meta">
                    <text class="tag">三甲</text>
                    <text class="hospital">积水潭医院</text>
                  </view>
                </view>
                <navigator class="doctor-contcat" hover-class="none" url=" "> 进入咨询 </navigator>
              </view>
            </swiper-item>
          </swiper>
        </custom-section>
        <!-- 药品订单 -->
        <custom-section show-arrow title="药品订单">
          <template #right>
            <navigator hover-class="none" url=" "> 全部订单 </navigator>
          </template>
          <view class="drug-order">
            <navigator hover-class="none" url=" ">
              <uni-badge
                :text="userInfo.orderInfo?.paidNumber.toString()"
                :offset="[3, 3]"
                absolute="rightTop"
              >
                <image src="/static/images/order-status-1.png" class="status-icon" />
              </uni-badge>
              <text class="status-label">待付款</text>
            </navigator>
            <navigator hover-class="none" url=" ">
              <uni-badge
                :text="userInfo.orderInfo?.receivedNumber.toString()"
                :offset="[3, 3]"
                absolute="rightTop"
              >
                <image src="/static/images/order-status-2.png" class="status-icon" />
              </uni-badge>
              <text class="status-label">待发货</text>
            </navigator>
            <navigator hover-class="none" url=" ">
              <uni-badge
                :text="userInfo.orderInfo?.shippedNumber.toString()"
                :offset="[3, 3]"
                absolute="rightTop"
              >
                <image src="/static/images/order-status-3.png" class="status-icon" />
              </uni-badge>
              <text class="status-label">待收货</text>
            </navigator>
            <navigator hover-class="none" url=" ">
              <uni-badge
                :text="userInfo.orderInfo?.finishedNumber.toString()"
                :offset="[3, 3]"
                absolute="rightTop"
              >
                <image src="/static/images/order-status-4.png" class="status-icon" />
              </uni-badge>
              <text class="status-label">已完成</text>
            </navigator>
          </view>
        </custom-section>
        <!-- 快捷工具 -->
        <custom-section title="快捷工具">
          <uni-list :border="false">
            <uni-list-item
              :border="false"
              title="我的问诊"
              show-arrow
              show-extra-icon
              to="/subpkg_consult/pages/order_list/order_list"
              :extra-icon="{
                type: 'icon-symbol-tool-01',
              }"
            />
            <uni-list-item
              :border="false"
              title="我的处方"
              show-arrow
              show-extra-icon
              :extra-icon="{
                type: 'icon-symbol-tool-02',
              }"
            />
            <uni-list-item
              :border="false"
              title="家庭档案"
              link="navigateTo"
              to="/subpkg_archive/pages/list/list"
              show-arrow
              show-extra-icon
              :extra-icon="{
                type: 'icon-symbol-tool-03',
              }"
            />
            <uni-list-item
              :border="false"
              title="地址管理"
              show-arrow
              show-extra-icon
              :extra-icon="{
                type: 'icon-symbol-tool-04',
              }"
            />
            <uni-list-item
              :border="false"
              title="我的评价"
              show-arrow
              show-extra-icon
              :extra-icon="{
                type: 'icon-symbol-tool-05',
              }"
            />
            <uni-list-item
              :border="false"
              title="官方客服"
              show-arrow
              show-extra-icon
              :extra-icon="{
                type: 'icon-symbol-tool-06',
              }"
            />
            <uni-list-item
              :border="false"
              title="设置"
              show-arrow
              show-extra-icon
              :extra-icon="{
                type: 'icon-symbol-tool-07',
              }"
            />
          </uni-list>
        </custom-section>
        <!-- 退出登录 -->
        <view @click="handleLogout" class="logout-button">退出登录</view>
      </view>
    </scroll-view>
  </auth-page>
</template>

<style lang="scss">
@import './index.scss';
</style>
